import { getCssVariableValue } from '@/utils/utils';

// 系列相关
export function getSeri({ type, name, color, ...others }) {
  let config = {
    type,
    name,
    itemStyle: { color },
  };
  if (type === 'line') {
    config = {
      ...config,
      symbol: 'none',
      lineStyle: { width: 1 },
    };
  } else if (type === 'bar') {
    config = {
      barMaxWidth: 20,
      ...config,
    };
  }
  return {
    ...config,
    ...others,
  };
}

// 基础配置
export const getOptions = ({
  titleText,
  remSize,
  XAXIS,
  yAxis,
  grid,
  legendData,
  tooltip,
  dataZoom,
}) => {
  return {
    title: {
      text: titleText,
      show: true,
      top: 8 * remSize,
      left: -4 * remSize,
      textStyle: {
        fontSize: 14 * remSize,
        fontWeight: 300,
        lineHeight: 14 * remSize,
        color: '#FFFFFF',
      },
    },
    grid: grid || {
      containLabel: true,
      top: 32 * remSize,
      left: 10 * remSize,
      bottom: 52 * remSize,
      right: 10 * remSize,
    },
    tooltip: {
      trigger: 'axis',
      padding: [12 * remSize, 12 * remSize],
      formatter: (params) => {
        if (tooltip) return tooltip(params);
        const _arr = ['', '最低价格', 'Q1价格', '中位价格', 'Q3价格', '最高价格'];
        let res = '<div  style="font-size:12px">';
        res += `<div>${params[0].name}</div>`;
        params.forEach((item) => {
          if (item.seriesName === '历史日前电价') {
            item.data.forEach((v, i) => {
              if (i !== 0) {
                res += `
                    <div style="color:#D3D4D4; display:flex">
                    <div style="width:100px;">${item.marker} ${_arr[i]}</div>
                    <div>${parseFloat(v).toFixed(2)}</div>
                  </div>`;
              }
            });
          }
          if (item.seriesName === '历史平均电价') {
            res += `
            <div style="color:#D3D4D4; display:flex">
              <div style="width:100px;">${item.marker} 历史平均电价</div>
              <div>${parseFloat(item.data).toFixed(2)}</div>
            </div>`;
          }
        });

        return res + '</div>';
      },
      position: function (point, params, dom, rect, size) {
        let x = 0;
        let y = 0;
        const pointX = point[0];
        const pointY = point[1];
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];
        if (boxWidth > pointX) {
          x = pointX + 15;
        } else {
          x = pointX - boxWidth - 15;
        }
        if (boxHeight > pointY) {
          y = 5;
        } else {
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      backgroundColor: '#161A1D',
      borderColor: '#161A1D',
      borderWidth: 1,
      textStyle: {
        color: '#A7A8A9',
        fontFamily: 'PingFang SC',
        fontStyle: 'none',
      },
    },
    legend: {
      right: 'center',
      top: 'bottom',
      width: '100%',
      itemGap: 13,
      itemWidth: 16,
      itemHeight: 8,
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
        fontSize: 12 * remSize,
        height: 14 * remSize,
        lineHeight: 17 * remSize,
      },
      padding: 0,
      data: legendData,
      inactiveColor: '#545454',
      inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
    },
    dataZoom: dataZoom || [
      {
        type: 'slider',
        start: 0,
        end: 100,
        left: 40,
        right: 10,
        bottom: 20,
        height: 20,
        show: true,
        backgroundColor: getCssVariableValue('--bg-form'),
        dataBackground: {
          dataBackground: {
            areaStyle: { opacity: 0 },
            lineStyle: { opacity: 0 },
          },
        },
        selectedDataBackground: {
          areaStyle: {
            color: getCssVariableValue('--font-primary'),
            opacity: 0.15,
          },
          lineStyle: { color: 'transparent' },
        },
        borderColor: 'transparent',
        handleStyle: {
          color: getCssVariableValue('--bg-form'),
          borderColor: getCssVariableValue('--bd'),
        },
        brushSelect: false,
        showDetail: false,
      },
    ],
    xAxis: {
      type: 'category',
      data: XAXIS.map((v) => v || ''),
      splitNumber: Math.random(),
      triggerEvent: true,
      boundaryGap: ['0%', '0%'],
      axisPointer: {
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLine: {
        show: true,
        onZero: false,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        // interval: Math.floor(XAXIS.length / 11),
        lineHeight: 12 * remSize,
        margin: 9 * remSize,
      },
    },
    yAxis: yAxis || {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 12 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  };
};

// 长周期日常电价预测
export function DealElectLongTermPriceFocast(data = {}, remSize) {
  const {
    XAXIS = [],
    realPrice = [],
    focastPrice = [],
    referenPrice = [],
    maxPrice = [],
    minPrice = [],
  } = data;

  const yAxis = [
    {
      type: 'value',
      name: '元/MWh',
      nameTextStyle: {
        align: 'center',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '实际电价',
      // itemStyle: { opacity: 1, borderWidth: 1, borderColor: '#5E92F6', color: '#272829' },
    },
    {
      name: '预测电价',
      // itemStyle: { opacity: 1, borderWidth: 1, borderColor: '#67DCAB', color: '#272829' },
    },
    {
      name: '参考价格',
    },
    {
      name: '上限价格',
    },
    {
      name: '下限价格',
    },
  ];

  /*   _.remove(legendData, (item) => {
    if (item.name === '实际电价') {
      if (realPrice.length === 0) {
        return true;
      }
    }

    if (item.name === '预测电价') {
      if (focastPrice.length === 0) {
        return true;
      }
    }
    return false;
  }); */

  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    tooltip: (params) => {
      let res = '<div style="overflow-y:auto; max-height:120px; font-size:12px">';
      params.forEach((item) => {
        res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
          <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
        res += `${parseFloat(item.data).toFixed(2)}` + '<br/>';
        res += `</span></span>`;
      });
      return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
    },
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'line',
        name: '实际电价',
        color: '#5E92F6',
        data: realPrice,
      }),
      getSeri({
        type: 'line',
        name: '预测电价',
        color: '#67DCAB',
        lineStyle: {
          width: 3,
        },
        data: focastPrice,
      }),
      getSeri({
        type: 'line',
        name: '参考价格',
        lineStyle: {
          width: 1,
          type: 'dashed',
        },
        itemStyle: { opacity: 0, color: '#C1D1FA' },
        color: '#C1D1FA',
        data: referenPrice,
      }),
      getSeri({
        type: 'line',
        name: '上限价格',
        itemStyle: { opacity: 0, color: '#F4903D' },
        color: 'F4903D',
        lineStyle: {
          width: 1,
          type: 'dashed',
        },
        data: maxPrice,
      }),
      getSeri({
        type: 'line',
        name: '下限价格',
        itemStyle: { opacity: 0, color: '#F1D2CC' },
        color: '#F1D2CC',
        lineStyle: {
          width: 1,
          type: 'dashed',
        },
        data: minPrice,
      }),
    ],
  };
}

// 长周期日常电价预测 山东
export function DealElectLongTermPriceFocast_shandong(data = {}, remSize) {
  const { XAXIS = [], focastPrice = [], isPoint = false } = data;
  const yAxis = [
    {
      type: 'value',
      name: '元/MWh',
      nameTextStyle: {
        align: 'center',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '预测电价',
      // itemStyle: { opacity: 1, borderWidth: 1, borderColor: '#67DCAB', color: '#272829' },
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    tooltip: (params) => {
      let res = '<div  style="overflow-y:scroll;max-height:120px;font-size:12px">';
      params.forEach((item) => {
        res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
          <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
        res += `${parseFloat(item.data).toFixed(2)}` + '<br/>';
        res += `</span></span>`;
      });
      return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
    },
  });
  let lineData = [];
  lineData.push({
    name: '日线',
    xAxis: 0,
  });
  XAXIS.forEach((item) => {
    if (item.includes('2400')) {
      lineData.push({
        name: '日线',
        xAxis: item,
      });
    }
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'line',
        name: '预测电价',
        color: '#67DCAB',
        smooth: 0,
        symbol: 'circle',
        markLine: {
          lineStyle: {
            color: '#383B3E',
            emphasis: 'white',
            type: 'solid',
          },
          data: isPoint ? lineData : [],
          symbol: 'none',
          silent: true,
          label: { formatter: '' },
        },
        data: focastPrice,
      }),
    ],
  };
}

// 历史日前电价
export function DealElectHistoryBeforePrice(data = {}, remSize) {
  const { XAXIS = [], historyBeforePrice = [], averageValue = [] } = data;

  const yAxis = [
    {
      type: 'value',
      name: '元/MWh',
      nameTextStyle: {
        align: 'center',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '历史日前电价',
      icon: 'roundRect',
      // itemStyle: { color: '#5E92F6', borderColor: '#5E92F6', borderWidth: 0 },
    },
    {
      name: '历史平均电价',
      icon: 'roundRect',
      // itemStyle: { color: '#EE6666', borderColor: '#EE6666', borderWidth: 0 },
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'boxplot',
        name: '历史日前电价',
        itemStyle: {
          color: 'rgba(94, 146, 246, 0.3)',
          borderColor: '#5E92F6',
        },
        boxWidth: ['10%', '100%'],
        data: historyBeforePrice,
      }),
      getSeri({
        type: 'line',
        name: '历史平均电价',
        smooth: 0.6,
        symbol: 'none',
        color: '#EE6666',
        lineStyle: {
          width: 2,
        },
        data: averageValue,
      }),
    ],
  };
}

// 长周期供需预测
export function DealElectLongSupplyForecast(data = {}, remSize) {
  const {
    XAXIS = [],
    actualProvincialLoad = [],
    provincialLoadForecast = [],
    actualNewEnergyPower = [],
    newEnergyPowerForecast = [],
    actualTieLineLoad = [],
    tieLineLoadForecast = [],
  } = data;

  const yAxis = [
    {
      type: 'value',
      name: '元/MWh',
      nameTextStyle: {
        align: 'center',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '统调负荷实际',
    },
    {
      name: '统调负荷预测',
    },
    {
      name: '新能源出力实际',
    },
    {
      name: '新能源出力预测',
    },
    {
      name: '联络线出力实际',
    },
    {
      name: '联络线出力预测',
    },
  ];
  // 过滤不展示的函数
  /* _.remove(legendData, (item) => {
    if (item.name === '统调负荷预测') {
      if (realPrice.length === 0) {
        return true;
      }
    }
    return false;
  }); */

  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    tooltip: (params) => {
      let res = '<div style="/* overflow-y:auto; max-height:120px; */ font-size:12px">';
      params.forEach((item) => {
        res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
          <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
        res += `${parseFloat(item.data).toFixed(2)}` + '<br/>';
        res += `</span></span>`;
      });
      return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
    },
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'line',
        name: '统调负荷实际',
        color: '#4783f6',
        data: actualProvincialLoad,
      }),
      getSeri({
        type: 'line',
        name: '统调负荷预测',
        color: '#9eccd3',
        data: provincialLoadForecast,
      }),
      getSeri({
        type: 'line',
        name: '新能源出力实际',
        color: '#67DCAB',
        data: actualNewEnergyPower,
      }),
      getSeri({
        type: 'line',
        name: '新能源出力预测',
        color: '#ECD383',
        data: newEnergyPowerForecast,
      }),
      getSeri({
        type: 'line',
        name: '联络线出力实际',
        color: '#F4903D',
        data: actualTieLineLoad,
      }),
      getSeri({
        type: 'line',
        name: '联络线出力预测',
        color: '#ee5353',
        data: tieLineLoadForecast,
      }),
    ],
  };
}

// 市场供需关系
export function DealElectMarketSupplyDemandRelationship(data = {}, remSize) {
  const {
    XAXIS = [],
    water = [],
    fire = [],
    newEnergy = [],
    newEnergy_1 = [],
    newEnergy_2 = [],
    newEnergy_3 = [],
    provinceId = '',
  } = data;

  const yAxis = [
    {
      type: 'value',
      name: 'MW',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [
    {
      name: '火电最小',
    },
    {
      name: '水电发力',
    },
    {
      name: '新能源出力1',
    },
    {
      name: '新能源出力2',
    },
    {
      name: '新能源出力3',
    },
    {
      name: '新能源出力4',
    },
  ];
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    tooltip: (params) => {
      let res = '<div  style="font-size:12px">';
      params.forEach((item) => {
        res += `<span style=\"display:flex;align-items: center;justify-content: space-between;\">
          <span style=\"\">${item.marker}${item.seriesName}</span><span style=\"padding-left:20px\">`;
        res +=
          `${item.data === null || item.data === '-' ? '-' : parseFloat(item.data).toFixed(3)}` +
          '<br/>';
        res += `</span></span>`;
      });
      return `<span style=\"font-size:12px\">` + params[0].name + '</span><br/>' + res + '</div>';
    },
  });
  let series = [
    getSeri({
      type: 'line',
      name: '火电最小',
      stack: 'A',
      areaStyle: {},
      lineStyle: {
        color: '#5E92F6',
        width: 1,
        type: 'solid',
      },
      color: '#5E92F633',
      data: fire,
    }),
    getSeri({
      type: 'line',
      name: '水电发力',
      stack: 'A',
      lineStyle: {
        color: '#67DCAB',
        width: 1,
        type: 'solid',
      },
      areaStyle: {},
      color: '#67DCAB33',
      data: water,
    }),
    getSeri({
      type: 'line',
      name: '新能源出力1',
      stack: 'A',
      areaStyle: {},
      lineStyle: {
        color: '#F5BE15',
        width: 1,
        type: 'solid',
      },
      color: '#F5BE1533',
      data: newEnergy,
    }),
    getSeri({
      type: 'line',
      name: '新能源出力2',
      itemStyle: { opacity: 0 },
      lineStyle: {
        width: 1,
        type: 'dashed',
      },
      data: newEnergy_1,
    }),
    getSeri({
      type: 'line',
      name: '新能源出力3',
      itemStyle: { opacity: 0 },
      lineStyle: {
        width: 1,
        type: 'dashed',
      },
      data: newEnergy_2,
    }),
    getSeri({
      type: 'line',
      name: '新能源出力4',
      itemStyle: { opacity: 0 },
      lineStyle: {
        width: 1,
        type: 'dashed',
      },
      data: newEnergy_3,
    }),
  ];
  // 当为山西省时去掉火电最小
  if (provinceId === '14') {
    series.shift();
  }
  return {
    ...option,
    series: series,
  };
}

// 动力煤市场行情
export function DealElectSteamCoalMarket(data = {}, remSize) {
  const {
    XAXIS = [],
    openingPrice = [],
    closingPrice = [],
    highestPrices = [],
    lowestPrices = [],
    upsAndDowns = [],
    amplitude = [],
    ampP = [], //振幅比例
    percent = [],
  } = data;

  const yAxis = [
    {
      type: 'value',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const legendData = [];
  const grid = {
    containLabel: true,
    top: 12 * remSize,
    left: 10 * remSize,
    bottom: 32 * remSize,
    right: 0,
  };
  const dataZoom = [
    {
      type: 'slider',
      start: 0,
      end: 100,
      left: 40,
      right: 10,
      bottom: 0,
      height: 20,
      show: true,
      backgroundColor: getCssVariableValue('--bg-form'),
      dataBackground: {
        dataBackground: {
          areaStyle: { opacity: 0 },
          lineStyle: { opacity: 0 },
        },
      },
      selectedDataBackground: {
        areaStyle: {
          color: getCssVariableValue('--font-primary'),
          opacity: 0.15,
        },
        lineStyle: { color: 'transparent' },
      },
      borderColor: 'transparent',
      handleStyle: {
        color: getCssVariableValue('--bg-form'),
        borderColor: getCssVariableValue('--bd'),
      },
      brushSelect: false,
      showDetail: false,
    },
    // {
    //   type: 'slider',
    //   start: 0,
    //   end: 100,
    //   left: 40,
    //   right: 10,
    //   bottom: 20,
    //   height: 20,
    //   show: true,
    //   backgroundColor: getCssVariableValue('--bg-form'),
    //   dataBackground: {
    //     dataBackground: {
    //       areaStyle: { opacity: 0 },
    //       lineStyle: { opacity: 0 },
    //     },
    //   },
    //   selectedDataBackground: {
    //     areaStyle: {
    //       color: getCssVariableValue('--font-primary'),
    //       opacity: 0.15,
    //     },
    //     lineStyle: { color: 'transparent' },
    //   },
    //   borderColor: 'transparent',
    //   handleStyle: {
    //     color: getCssVariableValue('--bg-form'),
    //     borderColor: getCssVariableValue('--bd'),
    //   },
    //   brushSelect: false,
    //   showDetail: false,
    // },
  ];

  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    dataZoom,
    grid,
    tooltip: (params) => {
      let kLinePart = [
        {
          name: '开盘',
          index: 1,
        },
        {
          name: '最高',
          index: 4,
        },
        {
          name: '最低',
          index: 3,
        },
        {
          name: '收盘',
          index: 2,
        },
      ];
      let kLinePartString = [];
      let upPart = ['涨跌'];
      let upPartString = [];
      let downPart = ['振幅'];
      let downPartString = [];

      params.forEach((paramsItem) => {
        if ('动力煤嘿嘿!' === paramsItem.seriesName) {
          kLinePart.forEach((kLineItem) => {
            kLinePartString.push(`
              <div style=" height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.marker} ${kLineItem.name}</span>
                <span style=\";padding-left:8px\">${paramsItem.data[kLineItem.index].toFixed(
                  2,
                )}</span>
              </div>
            `);
          });
        }
      });
      upPart.forEach((upItem) => {
        params.forEach((paramsItem) => {
          if (upItem === paramsItem.seriesName) {
            upPartString.push(`
              <span style="height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.seriesName}</span>
                <span style=\";padding-left:8px\">
                ${paramsItem.data.toFixed(2)}(${
              Math.round(percent[paramsItem.dataIndex] * 10000) / 100
            }%)</span>
              </span>
            `);
          }
        });
      });
      downPart.forEach((downItem) => {
        params.forEach((paramsItem) => {
          if (downItem === paramsItem.seriesName) {
            downPartString.push(`
              <span style=" height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.seriesName}</span>
                <span style=\";padding-left:8px\">
                ${paramsItem.data.toFixed(2)}(${
              Math.round(ampP[paramsItem.dataIndex] * 10000) / 100
            }%)</span>
              </span>
            `);
          }
        });
      });
      let str = `
        <div style="color: #7A7D7F;font-size:12px">${params[0].name}</div>
          <div style="color: #A7A8A9;font-size:12px">
      `;
      str += kLinePartString.join('');
      str += upPartString.join('');
      str += downPartString.join('');
      str += `</div>`;
      return str;
    },
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'candlestick',
        name: '动力煤嘿嘿!',
        itemStyle: {
          color: '#E86452',
          color0: '#67DCAB',
        },
        data: openingPrice.map((t, i) => [t, closingPrice[i], lowestPrices[i], highestPrices[i]]),
      }),
      getSeri({
        type: 'line',
        name: '涨跌',
        itemStyle: {
          color: 'transparent',
        },
        data: upsAndDowns,
      }),
      getSeri({
        type: 'line',
        name: '振幅',
        itemStyle: {
          color: 'transparent',
        },
        data: amplitude,
      }),
    ],
  };
}

// MACD
export function DealElectMADC(data = {}, remSize) {
  const {
    XAXIS = [],
    openingPrice = [],
    closingPrice = [],
    highestPrices = [],
    lowestPrices = [],
    upsAndDowns = [],
    amplitude = [],
  } = data;

  const yAxis = [
    {
      type: 'value',
      nameTextStyle: {
        align: 'right',
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        show: false,
        onZeroAxisIndex: 1,
      },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
        fontStyle: 'DIN-Light',
        fontSize: 12 * remSize,
        margin: 8 * remSize,
        height: 14 * remSize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ];
  const dataZoom = [
    // {
    //   type: 'slider',
    //   start: 0,
    //   end: 100,
    //   left: 40,
    //   right: 10,
    //   bottom: 0,
    //   height: 20,
    //   backgroundColor: '#2B2E32',
    //   dataBackground: {
    //     lineStyle: {
    //       color: '#4E5154',
    //     },
    //     areaStyle: {
    //       color: '#2B2E32',
    //     },
    //   },
    //   selectedDataBackground: {
    //     lineStyle: {
    //       color: '#4E5154',
    //     },
    //     areaStyle: {
    //       color: '#646769',
    //       opacity: 0.2,
    //     },
    //   },
    //   borderColor: '#2B2E32',
    //   handleStyle: {
    //     color: '#646769',
    //   },
    //   moveHandleStyle: {
    //     color: '#EFF2F9',
    //   },
    //   brushSelect: false,
    //   showDetail: false,
    // },
    {
      type: 'slider',
      start: 0,
      end: 100,
      left: 40,
      right: 10,
      bottom: 20,
      height: 20,
      show: true,
      backgroundColor: getCssVariableValue('--bg-form'),
      dataBackground: {
        dataBackground: {
          areaStyle: { opacity: 0 },
          lineStyle: { opacity: 0 },
        },
      },
      selectedDataBackground: {
        areaStyle: {
          color: getCssVariableValue('--font-primary'),
          opacity: 0.15,
        },
        lineStyle: { color: 'transparent' },
      },
      borderColor: 'transparent',
      handleStyle: {
        color: getCssVariableValue('--bg-form'),
        borderColor: getCssVariableValue('--bd'),
      },
      brushSelect: false,
      showDetail: false,
    },
  ];
  const legendData = [];
  const grid = {
    containLabel: true,
    top: 12 * remSize,
    left: 0,
    bottom: 32 * remSize,
    right: 0,
  };
  const option = getOptions({
    remSize,
    XAXIS,
    yAxis,
    legendData,
    grid,
    dataZoom,
    tooltip: (params) => {
      let kLinePart = [
        {
          name: '开盘',
          index: 1,
        },
        {
          name: '最高',
          index: 4,
        },
        {
          name: '最低',
          index: 3,
        },
        {
          name: '收盘',
          index: 2,
        },
      ];
      let kLinePartString = [];
      let upPart = ['涨跌'];
      let upPartString = [];
      let downPart = ['振幅'];
      let downPartString = [];

      params.forEach((paramsItem) => {
        if ('动力煤嘿嘿!' === paramsItem.seriesName) {
          kLinePart.forEach((kLineItem) => {
            kLinePartString.push(`
              <div style=" height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.marker} ${kLineItem.name}</span>
                <span style=\";padding-left:8px\">${paramsItem.data[kLineItem.index].toFixed(
                  2,
                )}</span>
              </div>
            `);
          });
        }
      });
      upPart.forEach((upItem) => {
        params.forEach((paramsItem) => {
          if (upItem === paramsItem.seriesName) {
            upPartString.push(`
              <span style="height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.marker} ${paramsItem.seriesName}</span>
                <span style=\";padding-left:8px\">${paramsItem.data.toFixed(2)}</span>
              </span>
            `);
          }
        });
      });
      downPart.forEach((downItem) => {
        params.forEach((paramsItem) => {
          if (downItem === paramsItem.seriesName) {
            downPartString.push(`
              <span style=" height:24px; line-height: 24px; display:flex; justify-content:space-between;">
                <span>${paramsItem.seriesName}</span>
                <span style=\";padding-left:8px\">${paramsItem.data.toFixed(3)}</span>
              </span>
            `);
          }
        });
      });
      let str = `
        <div style="color: #7A7D7F;font-size:12px">${params[0].name}</div>
          <div style="color: #A7A8A9;font-size:12px">
      `;
      str += kLinePartString.join('');
      str += upPartString.join('');
      str += downPartString.join('');
      str += `</div>`;
      return str;
    },
  });
  return {
    ...option,
    series: [
      getSeri({
        type: 'candlestick',
        name: '动力煤嘿嘿!',
        itemStyle: {
          color: '#E86452',
          color0: '#67DCAB',
        },
        data: openingPrice.map((t, i) => [t, closingPrice[i], lowestPrices[i], highestPrices[i]]),
      }),
      getSeri({
        type: 'line',
        name: '涨跌',
        itemStyle: {
          color: 'transparent',
        },
        data: upsAndDowns,
      }),
      getSeri({
        type: 'line',
        name: '振幅',
        itemStyle: {
          color: 'transparent',
        },
        data: amplitude,
      }),
    ],
  };
}
